<style scoped>
    #logistic{
        height:100% ;
        background-color: #ecf1f2;
    }
    #writeBody{
        width:-webkit-calc(100% - 24px);
        height:-webkit-calc(100% - 67px);
        background-color: white;
        margin: 0 auto;
        overflow: auto;
        position: relative;
    }
    #logistic .topModal{
        width: 100%;
        background-color: #ecf1f2;
        padding: 0 12px;
        box-sizing: border-box;
        overflow: hidden;
        zoom: 1;
    }
    #logistic .thisPosition{
        height: 42px;
        line-height: 42px;
        float: left;
        font-weight: 600;
        font-size: 12px;
    }
    #logistic .maintenance{
        float: right;
        overflow: hidden;
        zoom: 1;
    }
    #logistic .maintenance span{
        font-weight: 600;
        color: #495060;
    }
    #logistic .maintenance button{
        padding: 8px 10px;
    }
    #logistic .searchForm{
        padding: 14px 10px 0;
    }
    #logistic .tablePage{
        width: 100%;
        position: absolute;
        bottom: 0;
    }
    #logistic .fl{
        height: 32px;
        line-height: 32px;
        float: left;
    }
    #logistic .fr{
        float: right;
    }
    .function{
        height: 26px;
        line-height: 19px;
        background-color: #37b3b3;
        border: 0;
    }
    .function:hover{
        background-color: #019ea3;
    }

</style>
<style>
    #maintenanceCK input{
        height: 26px;
        padding-top: 0;
        padding-bottom:0;
    }
    #logistic .ivu-select-selection,#maintenanceCK .ivu-select-selection{
         height: 26px !important;
         padding-top: 0;
         padding-bottom:0;
     }

    #logistic .ivu-select-placeholder,#maintenanceCK .ivu-select-placeholder{
        height: 26px !important;
        line-height: 26px !important;
        padding-top: 0;
        padding-bottom:0;
    }
    #logistic .ivu-select-selected-value{
        height: 26px
    }
    #logistic .searchForm .ivu-form-item-label{
        padding: 10px 2px 10px 0 !important;
        font-weight: 600;
    }
    #logistic .searchForm .ivu-input{
        height: 26px;
        padding:0 7px;
        font-size: 12px;
    }
    #logistic .searchForm .ivu-btn{
        background-color: #37b3b3 !important;
        color: #fff !important;
        border: 1px solid #37b3b3 !important;
        padding: 3px 12px;
    }
    #logistic .searchForm .ivu-icon-ios-calendar-outline{
        height: 26px;
        line-height: 26px;
    }

    #maintenanceCK .ivu-modal{
        top: 0;
        box-shadow: 0 0 25px 5px #ccc;
    }
    #maintenanceCK .ivu-modal-content{
        border-radius: 0 !important;
    }
    #maintenanceCK .ivu-modal-header{
        background-image: url("../../images/bg.png");
    }
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #maintenanceCK .ivu-icon-ios-close-empty:hover{color: #999 }
    #maintenanceCK .ivu-icon-ios-close-empty{color: white }
</style>
<template>
    <div id="logistic">
        <div class="topModal">
            <div class="thisPosition">当前位置： 物流中心 &nbsp;/&nbsp; 物流配送</div>
            <div class="maintenance">
                <Button type="text" v-on:click="showCK=true"><span><i class="iconfont" style="color: #37b3b3">&#xe668;</i> 仓库维护</span></Button>
                <Button type="text"><span><i class="iconfont" style="color: #37b3b3">&#xe6cf;</i> 箱型维护</span></Button>
                <Button type="text"><span><i class="iconfont" style="color: #37b3b3">&#xe611;</i> 运单维护</span></Button>
                <Button type="text"><span><i class="iconfont" style="color: #37b3b3">&#xe61d;</i> 导出明细</span></Button>
            </div>
        </div>
        <div id="writeBody">
            <Form class="searchForm" ref="shippingForm" :model="shippingForm" inline>
                <Form-item label="订单号:" :label-width="50" style="width: 175px">
                    <Input v-model="shippingForm.ordernos"></Input>
                </Form-item>
                <Form-item label="运单号:" :label-width="50" style="width: 175px">
                    <Input v-model="shippingForm.waybillno"></Input>
                </Form-item>
                <Form-item label="物流单号:" :label-width="65" style="width: 175px">
                    <Input v-model="shippingForm.code"></Input>
                </Form-item>
                <Form-item label="门店号:" :label-width="50" style="width: 175px">
                    <Input v-model="shippingForm.ownedstore"></Input>
                </Form-item>
                <Form-item label="电话:" :label-width="35" style="width: 160px">
                    <Input v-model="shippingForm.tel"></Input>
                </Form-item>
                <Form-item label="发货日期:" :label-width="65" style="width: 265px">
                    <Date-picker type="daterange" v-model="shippingForm.shipdate" style="width: 200px;"></Date-picker>
                </Form-item>
                <Form-item label="状态:" :label-width="35" style="width: 120px">
                    <Select v-model="shippingForm.status">
                        <Option v-for="(item,key,index) in statusList" :value="item.value" :key="index">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="快递公司:" :label-width="65" style="width: 190px">
                    <Select v-model="shippingForm.expressCode">
                        <Option value="all">全部</Option>
                        <Option v-for="(item,key,index) in expressidList" :value="item.expressCode" :key="index">{{ item.expressName}}</Option>
                    </Select>

                </Form-item>
                <Form-item>
                    <Button class="search" v-on:click="aaa">搜索</Button>
                </Form-item>
            </Form>
            <div v-if="pageShow" class="tablePage clearFix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer></Page>
                </div>
            </div>
        </div>
        <bottom-part></bottom-part>
        <Modal title="对话框标题" v-model="showCK" class-name="vertical-center-modal" width="960px" id="maintenanceCK">
            <p slot="header" class="header" style="color: white">仓库管理</p>
            <Form class="searchForm" ref="shippingForm" :model="searchCK" inline>
                <Form-item label="公司名称:" :label-width="65" style="width: 175px">
                    <Input v-model="searchCK.company"></Input>
                </Form-item>
                <Form-item label="快递公司:" :label-width="65" style="width: 175px">
                    <Select v-model="searchCK.expressCode">
                        <Option value="all">全部</Option>
                        <Option v-for="(item,key,index) in expressidList" :value="item.expressCode" :key="index">{{ item.expressName}}</Option>
                    </Select>
                </Form-item>
                <Form-item label="是否启用:" :label-width="65" style="width: 175px">
                    <Select v-model="searchCK.start">
                        <Option value="all">启用</Option>
                        <Option value="all">禁用</Option>
                    </Select>
                </Form-item>
                <Form-item label="联系人:" :label-width="55" style="width: 175px">
                    <Input v-model="searchCK.contact"></Input>
                </Form-item>
                <Form-item><Button type="primary" class="function">新增</Button></Form-item>
                <Form-item><Button type="primary" class="function">修改</Button></Form-item>
            </Form>
            <p slot="footer">对话框内容</p>
        </Modal>
    </div>

</template>
<script>
    import bottomPart from '../../components/bottomPart.vue'
    export default {
        data() {
            return {
                shippingForm: {//物流条件查询
                    ordernos: '',//订单号
                    waybillno: '',//运单号
                    code: '',//物流编号
                    ownedstore: '',//门店号
                    tel: '',//电话
                    status: '',//状态
                    expressCode: '',//快递公司
                    shipdate: [new Date().getTime() - 3600 * 1000 * 24 * 0, new Date()],//发货日期
                },
                //仓库维护对话框
                searchCK:{
                    company:'',
                    expressCode:'',
                    start:'',
                    contact:''
                },
                showCK:false,//仓库运维
                statusList:[{value: ' ', label: '全部'}, {value: '0', label: '备货'}, {value: '1', label: '发货'}, {value: '2', label: '审核'}, {value: '3', label: '已审核'}, {value: '6', label: '已签收'}, {value: '7', label: '已收货'}, {value: '8', label: '待签收'}],
                expressidList:[{expressCode:'0',expressName:'顺丰快递'},{expressCode:'1',expressName:'EMS快递'},{expressCode:'2',expressName:'联邦快递'},{expressCode:'3',expressName:'DHL快递'},{expressCode:'4',expressName:'UPS快递'},{expressCode:'5',expressName:'TNT快递'}],
                pageShow:true,
                currentPage:10,
                pageTotal:10,
                pageSize:10,
                total:10,
                modal9: false,
                modal10: false,
            };
        },
        mounted() {

        },
        beforeDestroy() {

        },
        methods: {
            aaa(){
                console.log(this.shippingForm.shopdate)
            }
        },
        components: {
            bottomPart
        },
    };
</script>